<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="分类" prop="categoryId">
        <md-select-tree
          v-model="queryParams.categoryId"
          :defaultExpandAll="true"
          :data="parentList"
          nodeKey="rid"
          :defaultProps="{ label: 'name', children: 'categoryList' }"
          placeholder="请选择上级"
        ></md-select-tree>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:answer:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:user:remove']"
          >删除</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="answerList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="rid" />
      <el-table-column label="封面" align="left" prop="cover" min-width="150">
        <template slot-scope="{ row }">
          <div class="cover" style="width: 80px">
            <img
              :src="`${api}${row.cover}`"
              style="
                display: block;
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                margin: 0px auto;
              "
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" prop="title" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:answer:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:answer:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改题库对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="100%"
      fullscreen
      append-to-body
      :close-on-click-modal="false"
    >
      <div style="height: 80vh; overflow-x: hidden; overflow-y: auto">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="题名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入题名称" />
          </el-form-item>
          <el-form-item label="题序" prop="sort">
            <el-input v-model="form.sort" placeholder="请输入题序" />
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <md-select-tree
              v-model="form.categoryId"
              :defaultExpandAll="true"
              :data="parentList"
              nodeKey="rid"
              :defaultProps="{ label: 'name', children: 'categoryList' }"
              placeholder="请选择上级"
            ></md-select-tree>
          </el-form-item>

          <el-form-item label="封面" prop="cover">
            <ImageUpload v-model="form.cover" :limit="1" />
          </el-form-item>
          <el-form-item label="原题" prop="doc">
            <FileUpload v-model="form.doc" :limit="1" />
          </el-form-item>

          <el-form-item label="总分" prop="total">
            <el-input
              v-model="form.total"
              type="number"
              placeholder="请输入总分"
            />
          </el-form-item>
        </el-form>

        <el-form
          ref="form1"
          :model="form"
          :rules="rules1"
          label-position="left"
          label-width="80px"
          v-show="form.content"
        >
          <div
            v-for="(item, index) in form.content"
            :key="item.value"
            style="
              border: 1px solid #efefef;
              padding: 20px;
              margin-bottom: 20px;
            "
          >
            <el-form-item
              label="题类型"
              :prop="`content.${index}.questionType`"
              :rules="rules1.questionType"
            >
              <el-radio-group v-model="item.questionType">
                <!-- <el-radio :label="1">单选文本</el-radio> -->
                <!-- <el-radio :label="2">单选音频</el-radio> -->
                <el-radio :label="3">阅读题</el-radio>
                <!-- <el-radio :label="4">听力</el-radio> -->
                <el-radio :label="5">作文题</el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="item.questionType == 1 || item.questionType == 2">
              <el-form-item
                label="分数"
                :prop="`content.${index}.score`"
                :rules="rules1.score"
              >
                <el-input
                  v-model="item.score"
                  type="number"
                  placeholder="请输入分数"
                />
              </el-form-item>

              <el-form-item
                label="序号"
                :prop="`content.${index}.num`"
                :rules="rules1.num"
              >
                <el-input v-model="item.num" placeholder="请输入序号" />
              </el-form-item>

              <el-form-item
                label="题干"
                :prop="`content.${index}.question`"
                :rules="rules1.question"
              >
                <el-input v-model="item.question" placeholder="请输入题干" />
              </el-form-item>

              <el-form-item
                label="音频"
                :prop="`content.${index}.file`"
                v-if="item.questionType === 2"
                :rules="rules1.file"
              >
                <FileUpload
                  v-model="item.file"
                  :limit="1"
                  :fileSize="500"
                  :fileType="['mp3']"
                />
              </el-form-item>

              <el-form-item
                label="答案解析"
                :prop="`content.${index}.analyze`"
                :rules="rules1.analyze"
              >
                <el-input
                  v-model="item.analyze"
                  type="textarea"
                  placeholder="请输入答案解析"
                />
              </el-form-item>

              <el-form-item
                label="题类型"
                :prop="`content.${index}.topicType`"
                :rules="rules1.topicType"
              >
                <el-radio-group v-model="item.topicType">
                  <el-radio :label="1">单选</el-radio>
                  <el-radio :label="2">多选</el-radio>
                  <el-radio :label="3">判断</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form
                :ref="`formOptions${index}`"
                :model="item"
                :rules="rules2"
                label-position="left"
                inline
                label-width="100px"
                style="margin: 0px !important"
              >
                <div
                  v-for="(sub, subIndex) in item.options"
                  :key="`${index}-${sub.value}`"
                >
                  <el-form-item
                    :prop="`options.${subIndex}.num`"
                    label="选项序号"
                    :rules="rules2.num"
                  >
                    <el-input v-model="sub.num" placeholder="请输入选项序号" />
                  </el-form-item>

                  <el-form-item
                    :prop="`options.${subIndex}.label`"
                    label="选项文本"
                  >
                    <el-input
                      v-model="sub.label"
                      placeholder="请输入选项文本"
                    />
                  </el-form-item>

                  <el-form-item
                    :prop="`options.${subIndex}.label`"
                    label="是否正确答案"
                  >
                    <el-radio-group v-model="sub.isRight">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="handleAddXuanXiang(item, sub, index, subIndex)"
                      >新增选项</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="item.options.length > 1"
                      @click="handleDelXuanXiang(item, sub, index, subIndex)"
                      >删除选项</el-button
                    >
                  </el-form-item>
                </div>
              </el-form>
            </template>

            <template v-if="item.questionType == 3 || item.questionType == 4">
              <el-row>
                <el-col :span="10" style="padding-right: 10px">
                  <el-form-item
                    label="题目名称"
                    :prop="`content.${index}.articleName`"
                    :rules="rules1.articleName"
                  >
                    <el-input
                      v-model="item.articleName"
                      placeholder="请输入名称,例如阅读理解、完形填空、单项选择"
                    />
                  </el-form-item>
                  <!-- <el-form-item label="序号" :prop="`content.${index}.num`" :rules="rules1.num">
                <el-input v-model="item.num" placeholder="请输入序号" />
              </el-form-item> -->
                  <el-form-item
                    label="文章标题"
                    :prop="`content.${index}.articleTitle`"
                    :rules="rules1.articleTitle"
                  >
                    <el-input
                      v-model="item.articleTitle"
                      placeholder="请输入题干"
                    />
                  </el-form-item>

                  <el-form-item
                    label="文章描述"
                    :prop="`content.${index}.articleDes`"
                    :rules="rules1.articleDes"
                  >
                    <el-input
                      v-model="item.articleDes"
                      placeholder="请输入题干"
                    />
                  </el-form-item>

                  <el-form-item
                    label="文章内容"
                    :prop="`content.${index}.articleCon`"
                    :rules="rules1.articleCon"
                  >
                    <editor v-model="item.articleCon" :min-height="192" />
                  </el-form-item>
                </el-col>

                <el-col :span="14" style="padding-left: 10px">
                  <el-form
                    :ref="`formArticle${index}`"
                    :model="item"
                    :rules="rules3"
                    label-position="left"
                    label-width="100px"
                    style="
                      border: 1px solid #ddd;
                      padding: 0px 20px;
                      border-radius: 10px;
                      margin: 0px !important;
                    "
                  >
                    <div
                      v-for="(asub, asubIndex) in item.questionList"
                      :key="`${index}-${asub.value}`"
                      :style="
                        asubIndex < item.questionList.length - 1
                          ? { 'border-bottom': '1px solid #ddd' }
                          : { padding: '20px 0px' }
                      "
                    >
                      <el-form-item
                        label="题类型"
                        :prop="`questionList.${asubIndex}.questionType`"
                        :rules="rules3.questionType"
                      >
                        <el-radio-group v-model="asub.questionType">
                          <el-radio :label="1">文本</el-radio>
                          <el-radio :label="2">音频</el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item
                        label="分数"
                        :prop="`questionList.${asubIndex}.score`"
                        :rules="rules3.score"
                      >
                        <el-input
                          v-model="asub.score"
                          type="number"
                          placeholder="请输入分数"
                        />
                      </el-form-item>

                      <el-form-item
                        label="序号"
                        :prop="`questionList.${asubIndex}.num`"
                        :rules="rules3.num"
                      >
                        <el-input v-model="asub.num" placeholder="请输入序号" />
                      </el-form-item>

                      <el-form-item
                        label="题干"
                        :prop="`questionList.${asubIndex}.question`"
                        :rules="rules3.question"
                      >
                        <el-input
                          v-model="asub.question"
                          placeholder="请输入题干"
                        />
                      </el-form-item>

                      <el-form-item
                        label="音频"
                        :prop="`questionList.${asubIndex}.file`"
                        v-if="asub.questionType === 2"
                        :rules="rules3.file"
                      >
                        <FileUpload
                          v-model="asub.file"
                          :limit="1"
                          :fileSize="500"
                          :fileType="['mp3', 'MP3']"
                        />
                      </el-form-item>

                      <el-form-item
                        label="答案解析"
                        :prop="`questionList.${asubIndex}.analyze`"
                        :rules="rules3.analyze"
                      >
                        <el-input
                          v-model="asub.analyze"
                          type="textarea"
                          placeholder="请输入答案解析"
                        />
                      </el-form-item>

                      <el-form-item
                        label="题类型"
                        :prop="`questionList.${asubIndex}.topicType`"
                        :rules="rules3.topicType"
                      >
                        <el-radio-group v-model="asub.topicType">
                          <el-radio :label="1">单选</el-radio>
                          <el-radio :label="2">多选</el-radio>
                          <el-radio :label="3">判断</el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <div
                        style="
                          border: 1px solid #ddd;
                          border-radius: 10px;
                          padding: 20px;
                        "
                      >
                        <el-form
                          :ref="`formSubOptions${asubIndex}`"
                          :model="asub"
                          :rules="rules4"
                          label-position="top"
                          inline
                          label-width="100px"
                          style="margin: 0px !important"
                        >
                          <div
                            v-for="(osub, osubIndex) in asub.options"
                            :key="`${index}-${osub.value}`"
                            :style="
                              osubIndex < asub.options.length - 1
                                ? { 'border-bottom': '1px solid #ddd' }
                                : { padding: '20px 0px' }
                            "
                          >
                            <el-form-item
                              :prop="`options.${osubIndex}.num`"
                              label="选项序号"
                              :rules="rules4.num"
                            >
                              <el-input
                                v-model="osub.num"
                                placeholder="请输入选项序号"
                              />
                            </el-form-item>

                            <el-form-item
                              :prop="`options.${osubIndex}.label`"
                              label="选项文本"
                            >
                              <el-input
                                v-model="osub.label"
                                placeholder="请输入选项文本"
                              />
                            </el-form-item>

                            <el-form-item
                              :prop="`options.${osubIndex}.label`"
                              label="是否正确答案"
                            >
                              <el-radio-group v-model="osub.isRight">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                              </el-radio-group>
                            </el-form-item>

                            <el-form-item style="padding-left: 10px">
                              <div style="height: 20px">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                              </div>
                              <el-button
                                size="mini"
                                type="primary"
                                @click="handleAddXuanXiang1(asub, osubIndex)"
                                >新增选项</el-button
                              >
                              <el-button
                                size="mini"
                                type="danger"
                                v-if="asub.options.length > 1"
                                @click="handleDelXuanXiang1(asub, osubIndex)"
                                >删除选项</el-button
                              >
                            </el-form-item>
                          </div>
                        </el-form>
                      </div>

                      <el-form-item label-width="0px" style="padding-top: 20px">
                        <el-button
                          size="mini"
                          type="primary"
                          @click="handleAddTi1(index, asubIndex, item, asub)"
                          >新增题</el-button
                        >
                        <el-button
                          size="mini"
                          type="danger"
                          v-if="item.questionList.length > 1"
                          @click="handleDelTi1(index, asubIndex, item, asub)"
                          >删除题</el-button
                        >
                      </el-form-item>
                    </div>
                  </el-form>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.questionType == 5">
              <el-row>
                <el-col :span="10" style="padding-right: 10px">
                  <el-form-item
                    label="分数"
                    :prop="`content.${index}.score`"
                    :rules="rules1.score"
                  >
                    <el-input
                      v-model="item.score"
                      type="number"
                      placeholder="请输入分数"
                    />
                  </el-form-item>
                  <el-form-item
                    label="题目名称"
                    :prop="`content.${index}.articleName`"
                    :rules="rules1.articleName"
                  >
                    <el-input
                      v-model="item.articleName"
                      placeholder="请输入名称，例如：作文题、翻译题、分析题"
                    />
                  </el-form-item>
                  <el-form-item
                    label="答案解析"
                    :prop="`content.${index}.analyze`"
                    :rules="rules1.analyze"
                  >
                    <el-input
                      v-model="item.analyze"
                      type="textarea"
                      placeholder="请输入答案解析"
                    />
                  </el-form-item>
                  <el-form-item
                    label="序号"
                    :prop="`content.${index}.num`"
                    :rules="rules1.num"
                  >
                    <el-input v-model="item.num" placeholder="请输入序号" />
                  </el-form-item>
                  <el-form-item
                    label="作文题目"
                    :prop="`content.${index}.articleCon`"
                    :rules="rules1.articleCon"
                  >
                    <editor v-model="item.articleCon" :min-height="192" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
            <el-form-item label-width="0px" style="padding-top: 20px">
              <el-button
                size="small"
                type="primary"
                @click="handleAddTi(index, item)"
                >新增题</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelTi(index, item)"
                v-if="form.content.length > 1"
                >删除题</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listAnswer,
  getAnswer,
  getAnswerdetail,
  delAnswer,
  addAnswer,
  updateAnswer,
} from "@/api/web/answer";
import { listCategory } from "@/api/web/category";
import { api } from "@/utils/config.js";

export default {
  name: "Answer",
  data() {
    return {
      api,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 题库表格数据
      answerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
        title: null,
        type: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        categoryId: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        title: [{ required: true, message: "请填写题名称", trigger: "blur" }],
        cover: [{ required: true, message: "请选择封面", trigger: "change" }],
        doc: [{ required: true, message: "请选择源文件", trigger: "change" }],
        total: [{ required: true, message: "请输入总分", trigger: "blur" }],
      },
      rules1: {
        num: [{ required: true, message: "请填写序号", trigger: "blur" }], // 序号
        question: [{ required: true, message: "请填写题干", trigger: "blur" }], // 问题
        // file: [
        //   { required: true, message: "请上传音频", trigger: "change" }
        // ],
        questionType: [
          { required: true, message: "请选择题干类型", trigger: "blur" },
        ], // 1 文本 2 音频
        topicType: [
          { required: true, message: "请选择题类型", trigger: "blur" },
        ], // 问题类型 1 单选 2 多选 3 判断
        articleTitle: [
          { required: true, message: "请填写文章标题", trigger: "blur" },
        ],
        articleName: [
          { required: true, message: "请填写题目名称", trigger: "blur" },
        ],
        articleCon: [
          { required: true, message: "请填写文章内容", trigger: "blur" },
        ],
        score: [{ required: true, message: "请填写分数", trigger: "blur" }],
      },
      rules2: {
        num: [{ required: true, message: "请填写选项序号", trigger: "blur" }],
        // label: [
        //   { required: true, message: "请填写选项文本", trigger: "blur" }
        // ], // 选项文本
      },
      rules3: {
        num: [{ required: true, message: "请填写序号", trigger: "blur" }], // 序号
        question: [{ required: true, message: "请填写题干", trigger: "blur" }], // 问题
        file: [{ required: true, message: "请上传音频", trigger: "change" }],
        questionType: [
          { required: true, message: "请选择题干类型", trigger: "blur" },
        ], // 1 文本 2 音频
        topicType: [
          { required: true, message: "请选择题类型", trigger: "blur" },
        ], // 问题类型 1 单选 2 多选 3 判断
        score: [{ required: true, message: "请填写分数", trigger: "blur" }],
      },
      rules4: {
        num: [{ required: true, message: "请填写选项序号", trigger: "blur" }],
        // label: [
        //   { required: true, message: "请填写选项文本", trigger: "blur" }
        // ], // 选项文本
      },
      parentList: [],
    };
  },
  created() {
    this.getList();
    this.getParentList(true);
  },
  methods: {
    /** 查询题库列表 */
    getList() {
      this.loading = true;
      listAnswer(this.queryParams).then((response) => {
        this.answerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询分类列表 */
    getParentList(flag) {
      listCategory({
        type: 2,
      }).then((response) => {
        this.parentList = [];
        if (!flag) {
          const menu = { rid: 0, name: "主类目", categoryList: [] };
          menu.categoryList = response.data;
          this.parentList.push(menu);
        } else {
          this.parentList = response.data;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        rid: null,
        categoryId: null,
        title: null,
        cover: null,
        type: 1,
        total: null,
        content: [
          {
            value: 1,
            num: null, // 序号
            question: null, // 问题
            questionType: 1, // 1 文本 2 音频 3 阅读题 4完形填空
            topicType: 1, // 问题类型 1 单选 2 多选 3 判断 4 文章
            answer: null, // 所选答案
            rightAnswer: [],
            rightAnswerLabel: [],
            file: null, // 音频
            score: null, // 分数
            analyze: null, // 答题解析
            articleTitle: null,
            articleName: null, //题目名称
            articleDes: null,
            articleCon: null,
            writingType: null,
            questionList: [
              {
                value: 1,
                num: null, // 序号
                question: null, // 问题
                questionType: 1, // 1 文本 2 音频 3 阅读题
                topicType: 1, // 问题类型 1 单选 2 多选 3 判断 4 文章
                answer: null, // 所选答案
                rightAnswer: [],
                rightAnswerLabel: [],
                file: null, // 音频
                score: null, // 分数
                analyze: null, // 答题解析
                options: [
                  {
                    num: null,
                    label: null, // 选项文本
                    isRight: false, // 是否为正确答案
                    value: 1, // 选项值
                  },
                ],
              },
            ], // questionType=3
            options: [
              // 选项
              {
                num: null,
                label: null, // 选项文本
                isRight: false, // 是否为正确答案
                value: 1, // 选项值
              },
            ],
          },
        ],
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.rid);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getParentList();
      this.open = true;
      this.title = "添加题";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.getParentList();
      const rid = row.rid || this.ids;
      getAnswerdetail(rid).then((res) => {
        if (res.code == 200) {
          this.$set(this.form, "content", JSON.parse(res.data[0].content));
          // this.loading = false;
        } else {
          this.$modal.msgWarning(res.msg);
        }
      });
      getAnswer(rid).then((response) => {
        this.form = { ...response.data, content: this.form.content };
        this.open = true;
        this.title = "修改题";
      });
      // this.loading = true;
    },
    handleAddTi(index, item) {
      this.form.content.push({
        value: this.form.content.length + 1,
        num: null, // 序号
        question: null, // 问题
        questionType: 1, // 1 文本 2 音频
        topicType: 1, // 问题类型 1 单选 2 多选 3 判断
        answer: null, // 所选答案
        rightAnswer: [],
        rightAnswerLabel: [],
        file: null, // 音频
        score: null, // 分数
        analyze: null, // 答题解析
        articleTitle: null,
        articleName: null, //题目名称
        articleDes: null,
        articleCon: null,
        writingType: null, //写作类型
        questionList: [
          {
            value: 1,
            num: null, // 序号
            question: null, // 问题
            questionType: 1, // 1 文本 2 音频 3 阅读题
            topicType: 1, // 问题类型 1 单选 2 多选 3 判断 4 文章
            answer: null, // 所选答案
            rightAnswer: [],
            rightAnswerLabel: [],
            file: null, // 音频
            score: null, // 分数
            analyze: null, // 答题解析
            options: [
              {
                num: null,
                label: null, // 选项文本
                isRight: false, // 是否为正确答案
                value: 1, // 选项值
              },
            ],
          },
        ], // questionType=3
        options: [
          // 选项
          {
            num: null,
            label: null, // 选项文本
            isRight: false, // 是否为正确答案
            value: 1, // 选项值
          },
        ],
      });
    },
    handleDelTi(index, item) {
      this.$modal
        .confirm("确定要删除吗？")
        .then(() => {
          this.form.content.splice(index, 1);
        })
        .catch(() => {});
    },
    handleAddTi1(index, asubIndex, item, asub) {
      item.questionList.push({
        value: item.questionList.length + 1,
        num: null, // 序号
        question: null, // 问题
        questionType: 1, // 1 文本 2 音频 3 阅读题
        topicType: 1, // 问题类型 1 单选 2 多选 3 判断 4 文章
        answer: null, // 所选答案
        rightAnswer: [],
        rightAnswerLabel: [],
        analyze: null, // 答题解析
        file: null, // 音频
        score: null, // 分数
        options: [
          {
            num: null,
            label: null, // 选项文本
            isRight: false, // 是否为正确答案
            value: 1, // 选项值
          },
        ],
      });
    },
    handleDelTi1(index, asubIndex, item, asub) {
      this.$modal
        .confirm("确定要删除吗？")
        .then(() => {
          item.questionList.splice(asubIndex, 1);
        })
        .catch(() => {});
    },
    handleAddXuanXiang(item, sub, index, subIndex) {
      item.options.push({
        num: null,
        label: null, // 选项文本
        isRight: false, // 是否为正确答案
        value: item.options.length + 1, // 选项值
      });
    },
    handleDelXuanXiang(item, sub, index, subIndex) {
      this.$modal
        .confirm("确定要删除吗？")
        .then(() => {
          item.options.splice(subIndex, 1);
        })
        .catch(() => {});
    },
    handleAddXuanXiang1(asub, index) {
      asub.options.push({
        num: null,
        label: null, // 选项文本
        isRight: false, // 是否为正确答案
        value: asub.options.length + 1, // 选项值
      });
    },
    handleDelXuanXiang1(asub, index) {
      this.$modal
        .confirm("确定要删除吗？")
        .then(() => {
          asub.options.splice(index, 1);
        })
        .catch(() => {});
    },
    /** 提交按钮 */
    async submitForm() {
      const params = Object.assign({}, { ...this.form });

      const forms = ["form", "form1"];

      const totals = [];

      if (params.content.length > 0) {
        for (let index = 0; index < params.content.length; index++) {
          console.log(params, "params");
          const item = params.content[index];
          console.log(item, "item");
          totals.push(item.score);

          item.rightAnswer = item.options
            .filter((e) => e.isRight)
            .map((m) => {
              return m.value;
            });
          item.rightAnswerLabel = item.options
            .filter((e) => e.isRight)
            .map((m) => {
              return m.num;
            });

          if (item.questionType === 3 || item.questionType === 4) {
            forms.push(`formArticle${index}`);
            for (let j = 0; j < item.questionList.length; j++) {
              const sub = item.questionList[j];

              totals.push(sub.score);

              sub.rightAnswer = sub.options
                .filter((e) => e.isRight)
                .map((m) => {
                  return m.value;
                });
              sub.rightAnswerLabel = sub.options
                .filter((e) => e.isRight)
                .map((m) => {
                  return m.num;
                });
              forms.push(`formSubOptions${j}`);
            }
          } else {
            forms.push(`formOptions${index}`);
          }
        }
      }

      console.log(totals, "total");

      let valid = false;

      for (let index = 0; index < forms.length; index++) {
        const form = forms[index];
        console.log(form, "form");
        console.log(this.$refs[form], "this.$refs");
        // try {
        //   await ((this.$refs[form] instanceof Array) ? this.$refs[form][0] : this.$refs[form]).validate()

        valid = true;
        // } catch (error) {
        //   console.log(error,'error')
        // valid = false
        // }
      }

      if (!valid) {
        return;
      }

      let total = totals
        .filter((e) => e !== undefined)
        .reduce((a, b) => {
          return parseInt(a) + parseInt(b);
        }, 0);

      if (parseInt(total) > parseInt(params.total)) {
        this.$modal.msgWarning("每道题的分数总和超出总分数，请更正");
        return;
      }

      params.content = JSON.stringify(params.content);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (params.rid != null) {
            updateAnswer(params).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAnswer(params).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        } else {
          this.$modal.msgWarning("校验未通过，请检查信息是否填完");
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const rids = row.rid || this.ids;
      this.$modal
        .confirm('是否确认删除编号为"' + rids + '"的数据项？')
        .then(function () {
          return delAnswer(rids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/answer/export",
        {
          ...this.queryParams,
        },
        `answer_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
